<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒布局(旧弹性盒)</title>
    <!-- <link rel="stylesheet" href="css/index5.css"> -->
</head>
<style>
    * {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;

}
html,
body,
.container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;

}
header {
  width: 100%;
  height: 80px;
  background: #f0f;
  text-align: center;
  line-height: 80px;
}
section {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;

  -webkit-box-pack: center;
  -webkit-box-align: center;
  overflow: auto;
  /*justify-content:center;*/
  /*align-items:center;*/
}
section p {
  width: 45%;
  height: 500px;
  background: orange;
}
footer {
  width: 100%;
  height: 100px;
  background: #ff0;
}
nav {
  display: -webkit-box;
  height: 100px;
}
nav a {
  -webkit-box-flex: 1;
  display: block;
  line-height: 100px;
  text-align: center;
}
</style>
<body>
    <div class="container">
        <header>页面头部</header>
        <section><p></p><p style="background:#f0f"></p>
        <p></p></section>
        <footer>
          <nav>
              <a href="#">首页</a>
              <a href="#">首页</a>
              <a href="#">首页</a>
              <a href="#">首页</a>
          </nav>

        </footer>
    </div>

</body>
</html>